<template>
	<div class="ranking">
		<slot></slot>
		<div class="switch-box" >
			<span 
			v-for="(item,index) in switchContent" 
			:key="item" 
			@click='switchBox(index)'
			:class="index==isActive?'active':''"
			>{{item}}</span>
		</div>
		<div v-show="isActive === 0">
			<div class="rank-box" v-for="(item) in (ranking.price || ranking.brand)" :key="item.rank">
				<div class="prize" v-show="item.rank === 1">
					<img src="../../assets/image/icon／金牌.png" alt=""> 
				</div>
				<div class="prize" v-show="item.rank === 2">
					<img src="../../assets/image/icon／银牌.png" alt="">
				</div>
				<div class="prize" v-show="item.rank === 3">
					<img src="../../assets/image/icon／铜牌.png" alt="">
				</div>
				<div v-show="item.rank > 3" class="rankNum">
					{{item.rank}}
				</div>
				<div class="rankData">
					<div>{{item.name}}</div>
					<div>
						<div class="left">
							<van-progress 
							:percentage="item.percent" 
							:show-pivot="false"
							track-color="white"
							color="#F6C401"
							ref="price"
							/>
						</div>
						<div class="right">
							{{item.num}}
						</div>
					</div>
				</div>
			</div>
		</div>
		<div v-show="isActive === 1">
			<div class="rank-box" v-for="(item) in (ranking.user || ranking.carType)" :key="item.rank">
				<div class="prize" v-show="item.rank === 1">
					<img src="../../assets/image/icon／金牌.png" alt=""> 
				</div>
				<div class="prize" v-show="item.rank === 2">
					<img src="../../assets/image/icon／银牌.png" alt="">
				</div>
				<div class="prize" v-show="item.rank === 3">
					<img src="../../assets/image/icon／铜牌.png" alt="">
				</div>
				<div v-show="item.rank > 3" class="rankNum">
					{{item.rank}}
				</div>
				<div class="rankData">
					<div>{{item.name}}</div>
					<div>
						<div class="left">
							<van-progress 
							:percentage="item.percent" 
							:show-pivot="false"
							track-color="white"
							color="#F6C401"
							ref="user"
							/>
						</div>
						<div class="right">
							{{item.num}}
						</div>
					</div>
				</div>
			</div>
		</div>
		<div v-show="isActive === 2">
			<div class="rank-box" v-for="(item) in ranking.vehicle" :key="item.rank">
				<div class="prize" v-show="item.rank === 1">
					<img src="../../assets/image/icon／金牌.png" alt=""> 
				</div>
				<div class="prize" v-show="item.rank === 2">
					<img src="../../assets/image/icon／银牌.png" alt="">
				</div>
				<div class="prize" v-show="item.rank === 3">
					<img src="../../assets/image/icon／铜牌.png" alt="">
				</div>
				<div v-show="item.rank > 3" class="rankNum">
					{{item.rank}}
				</div>
				<div class="rankData">
					<div>{{item.name}}</div>
					<div>
						<div class="left">
							<van-progress 
							:percentage="item.percent" 
							:show-pivot="false"
							track-color="white"
							color="#F6C401"
							ref="vehicle"
							/>
						</div>
						<div class="right">
							{{item.num}}
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
 
<script>
import { getUserIdData } from '../../views/video/api'
	export default { 
		props:{
			switchContent:{
				type: Array
			},
			ranking: {
				type: Object
			}
		},
		data() {
			return {
				isActive: 0,
			}
		},
		methods: {
			switchBox(n){
				this.isActive = n
				if (n === 0) {
					if(this.switchContent.length === 2) {
						this.ranking.brand.forEach((item,index) =>{
							this.$refs.price[index].resize()
							// console.log(item)
						})
					} else if (this.switchContent.length === 3) {
						this.ranking.price.forEach((item,index) =>{
							this.$refs.price[index].resize()
						})
					}
					// this.$refs.price.resize()
				} else if (n === 1) {
					if(this.switchContent.length === 3) {
						this.ranking.user.forEach((item,index) =>{
							this.$refs.user[index].resize()
						})
					} else if (this.switchContent.length === 2) {
						this.ranking.carType.forEach((item,index) =>{
							this.$refs.user[index].resize()
						})
					}
				} else if (n === 2) {
					// this.$refs.vehicle.resize()
					this.ranking.vehicle.forEach((item,index) =>{
						this.$refs.vehicle[index].resize()
					})
				}
			},
			async getData() {
				const {data} = await getUserIdData()
				this.$nextTick(() => {
					this.switchBox(0)
				})
			}
		},
		created() {
			this.getData()
		}
	}
</script>
 
<style scoped lang="less">
	.prize{
		padding-right: 10px;
	}
	.active{
		color: #000000 !important;
		background: #F6C401;
		border-radius: 17px;
	}
	.ranking{
		background-color: white;
		padding: 16px;
		.head-box{
			display: flex;
			justify-content: space-between;
			.title{
				font-size: 16px;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #000000;
			}
			.more{
				font-size: 14px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
			}
		}
		.switch-box{
			display: flex;
			background-color: #F7F7F7;
			width: 60%;
			margin: 16px auto 0 auto;
			border-radius: 17px;
			span{
				flex: 1;
				font-size: 14px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				padding: 10px;
				text-align: center;
			}
		}
		.rank-box{
			display: flex;
			height: 63px;
			align-items: center;
			border-bottom: 1px solid #E6E6E6;
			.rankNum{
				flex: 1;
				padding-right: 13px;
				font-size: 14px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
			}

			.rankData{
				flex: 19;
				div:nth-child(1){
					font-size: 15px;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}
				div:nth-child(2){
					display: flex;
					align-items: center;
					.left{
						width: 90%;
					}
					.right{
						font-size: 12px;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
						padding-left: 10px;
					}
				}
			}
		}
	}
</style>